<template>
    <div class="">
        <el-card>
        <el-form :inline="true" :model="query" class="query-form" size="small">
            <el-form-item>
                <el-button type="primary" icon="el-icon-edit" @click.native="handleForm()">添加</el-button>
            </el-form-item>
            <el-form-item class="query-form-item">
                <el-input v-model="query.searchtext"
                        placeholder="公司名称/商城名称/代理品牌"
                        prefix-icon="el-icon-search"
                        @keyup.enter.native="onSubmit"
                        ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                        icon="el-icon-refresh"
                        @click="onRest"></el-button>
                <el-button type="primary"
                        icon="el-icon-search"
                        @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading"
                    :data="list"
                    :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                    border>
            <el-table-column label="序 号" prop="userid" width="80" align="center">
                <span slot-scope="scope">{{ scope.$index + 1 }}</span>
            </el-table-column>
            <el-table-column label="公司名称"
                                prop="companyname"
                                align="center"></el-table-column>
            <el-table-column label="公司首席"
                                prop="chiefpartnername"
                                align="center"></el-table-column>
            <el-table-column label="公司等级"
                                prop="companylevel"
                                align="center">
                <template slot-scope="scope">
                    {{scope.row.companylevel | companylevel}}
                    <!-- <span></span> -->
                </template>
            </el-table-column>
            <el-table-column label="创建时间"
                                prop="createtime"
                                align="center">
                <template slot-scope="scope">
                    {{scope.row.createtime | formatDateStr('yyyy-MM-dd hh:mm:ss')}}
                </template>
            </el-table-column>
            <el-table-column label="操作"
                            align="center" fixed="right" width="160">
            <template slot-scope="scope">
                <el-button type="primary"
                            size="mini"
                            @click.native="showEdit(scope.row.companyid)">编辑</el-button>
                <el-button type="danger"
                            size="mini"
                            @click.native="deleteBrandPartnershipCompany(scope.row.companyid)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>


        <!--分页模块start-->
        <el-pagination class="pagination-container"
                        background
                        :page-size="query.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        layout="total,sizes,prev, pager, next, jumper"
                        :current-page="query.currentPage"
                        :page-sizes="[5,10, 20, 30, 50]"
                        :total="totalNumber"></el-pagination>
        <!--分页模块end-->
    
    <!--add弹窗-->
    <el-dialog
        :title="formMap[formName]"
        :visible.sync="formVisible"
        :before-close="hideForm"
        width="50%"
        top="5vh"
        :close-on-click-modal="false"
    >
    <template slot="title">
      <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
              {{formMap[formName]}}
          </span>
      </div>
    </template>
    <el-card>
        <el-form :inline="true" :model="formData" :rules="formRules" ref="ruleForm" label-width="200px">
                <el-form-item label="全球品牌合伙公司名称：" prop="firstcompanyname">
                    <el-input style="width:400px;margin-right:20px;" v-model="formData.firstcompanyname"  placeholder="请输入全球品牌合伙公司名称" ></el-input>
                    <el-form-item prop="firstchiefpartnerid">
                        <el-select placeholder="请选择隶属关系" filterable
                                    v-model="formData.firstchiefpartnerid"
                                    @change="selChiefpartnerid(1)"
                                    >
                            <el-option
                                v-for="(item,index) in member"
                                :key="index"
                                :label="item.username"
                                :value="item.userId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="省级品牌合伙公司名称：" prop="secondcompanyname">
                    <el-input style="width:400px;margin-right: 20px;" v-model="formData.secondcompanyname" placeholder="请输入省级品牌合伙公司名称" ></el-input>
                    <el-form-item prop="secondchiefpartnerid">
                        <el-select placeholder="请选择隶属关系" filterable
                                    v-model="formData.secondchiefpartnerid"
                                    @change="selChiefpartnerid(2)"
                                    >
                            <el-option
                                v-for="(item,index) in member"
                                :key="index"
                                :label="item.username"
                                :value="item.userId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="市级品牌合伙公司名称：" prop="threecompanyname">
                    <el-input style="width:400px;margin-right:20px;" v-model="formData.threecompanyname"  placeholder="请输入市级品牌合伙公司名称" ></el-input>
                    <el-form-item prop="threechiefpartnerid">
                        <el-select placeholder="请选择隶属关系" filterable
                                    v-model="formData.threechiefpartnerid"
                                    @change="selChiefpartnerid(3)"
                                    >
                            <el-option
                                v-for="(item,index) in member"
                                :key="index"
                                :label="item.username"
                                :value="item.userId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="县级品牌合伙公司名称：" prop="fourcompanyname">
                    <el-input style="width:400px;margin-right:20px;"  v-model="formData.fourcompanyname" placeholder="请输入县级品牌合伙公司名称" ></el-input>
                    <el-form-item prop="fourchiefpartnerid">
                        <el-select placeholder="请选择隶属关系" filterable
                                    v-model="formData.fourchiefpartnerid"
                                    @change="selChiefpartnerid(4)"
                                    >
                            <el-option
                                v-for="(item,index) in member"
                                :key="index"
                                :label="item.username"
                                :value="item.userId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
        </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="hideForm">取消</el-button>
            <el-button type="primary" @click.native="formSubmit()" :loading="formLoading">提交</el-button>
        </div>
    </el-dialog>

    <!-- 编辑页面 -->
    <el-dialog
        title="编辑"
        :visible.sync="formEditVisible"
        width="50%"
        top="5vh"
        :close-on-click-modal="false"
    >
    <template slot="title">
      <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
              编辑
          </span>
      </div>
    </template>
    <el-card>
        <el-form :inline="true" :model="formEditData" :rules="formEditRules" ref="editRules" label-width="200px">
                <el-form-item label="品牌合伙公司名称：" prop="companyname">
                    <el-input style="width:400px;margin-right:20px;"  v-model="formEditData.companyname" placeholder="请输入品牌合伙公司名称" ></el-input>
                </el-form-item>
                <el-form-item label="请选择隶属关系：" prop="chiefpartnername">
                    <el-select placeholder="请选择隶属关系" filterable
                                v-model="formEditData.chiefpartnerid"
                                @change="selChiefpartnerid(5)"
                                >
                        <el-option
                            v-for="(item,index) in member"
                            :key="index"
                            :label="item.username"
                            :value="item.userId">
                        </el-option>
                    </el-select>
                </el-form-item>
        </el-form>
    </el-card>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="formEditVisible = false">取消</el-button>
            <el-button type="primary" @click.native="edit" :loading="formLoading">提交</el-button>
        </div>
    </el-dialog>
    </el-card>
    </div>
</template>

<script>
import {
    // getAreaList,
    getBrandPartnershipCompanyPage, // 获取品牌合伙公司列表
    getBrandPartnershipCompanyDetail, // 获取品牌合伙公司详情
    deleteBrandPartnershipCompany, // 删除品牌合伙公司
    batchAddBusBrandPartnershipCompany, // 批量新增 品牌合伙公司
    addOrEditBusBrandPartnershipCompany, // 单条 新增/修改 品牌合伙公司
    getAuthAdmin,
    getList,
    getCountyBrandDetail
} from "../../api/partnershipManagement/partnershipManagement.js";
const formJson = {
    firstchiefpartnerid: null, // 全球品牌合伙公司 首席合伙人ID
    firstchiefpartnername: null, // 全球品牌合伙公司 首席合伙人名称
    firstcompanyname: null, // 全球品牌合伙公司 名称
    secondchiefpartnerid: null, // 省级品牌合伙公司 首席合伙人ID
    secondchiefpartnername: null, // 省级品牌合伙公司 首席合伙人名称
    secondcompanyname: null, // 省级品牌合伙公司 名称
    threechiefpartnerid: null, // 市级品牌合伙公司 首席合伙人ID
    threechiefpartnername: null, // 市级品牌合伙公司 首席合伙人名称
    threecompanyname: null, // 市级品牌合伙公司 名称
    fourchiefpartnerid: null, // 县级品牌合伙公司 首席合伙人ID
    fourchiefpartnername: null, // 县级品牌合伙公司 首席合伙人名称
    fourcompanyname: null // 县级品牌合伙公司 名称
};

export default {
    data() {
        return {
            dateVal: ["2020-10-14", "2020-11-19"],
            list: [],
            query: {
                currentPage: 1,
                pageSize: 5
            },
            nationwidebrandlist: [{ areaid: 1, areaname: "中国" }],
            provincebrandlist: [],
            citybrandlist: [],
            countybrandlist: [],
            authadminlist: [],
            formLoading: false,
            formName: "",
            formMap: {
                add: "添加",
                edit: "编辑",
                detail: "查看"
            },
            formEditData: {
                chiefpartnerid: null, // 品牌合伙公司 首席合伙人ID
                companyname: null, // 品牌合伙公司名
                chiefpartnername: null // 品牌合伙公司 首席合伙人名称
            },
            formEditVisible: false,
            formData: formJson,
            formVisible: false, //添加编辑显示
            loading: true,
            showEditPage: false,
            formEditRules: {
                companyname: {
                    required: true,
                    message: "请输入品牌合伙公司名称",
                    trigger: "blur"
                },
                chiefpartnername: {
                    required: true,
                    message: "请选择品牌合伙公司隶属关系",
                    trigger: "blur"
                }
            },
            formRules: {
                // globabrandname: {
                //     required: true,
                //     message: "请输入全球品牌公司名称",
                //     trigger: "blur"
                // },

                // firstchiefpartnername: null, // 全球品牌合伙公司 首席合伙人名称
                // secondchiefpartnername: null, // 省级品牌合伙公司 首席合伙人名称
                // threechiefpartnername: null, // 市级品牌合伙公司 首席合伙人名称
                // fourchiefpartnername: null, // 县级品牌合伙公司 首席合伙人名称
                firstcompanyname: {
                    required: true,
                    message: "请输入全球品牌合伙公司名称",
                    trigger: "blur"
                },
                secondcompanyname: {
                    required: true,
                    message: "请输入省级品牌合伙公司名称",
                    trigger: "blur"
                },

                threecompanyname: {
                    required: true,
                    message: "请输入市级品牌合伙公司名称",
                    trigger: "blur"
                },
                fourcompanyname: {
                    required: true,
                    message: "请输入县级品牌合伙公司名称",
                    trigger: "blur"
                },
                firstchiefpartnerid: {
                    required: true,
                    message: "请选择全球品牌合伙公司隶属关系",
                    trigger: "blur"
                },
                secondchiefpartnerid: {
                    required: true,
                    message: "请选择省级品牌合伙公司隶属关系",
                    trigger: "blur"
                },
                threechiefpartnerid: {
                    required: true,
                    message: "请选择市级品牌合伙公司隶属关系",
                    trigger: "blur"
                },
                fourchiefpartnerid: {
                    required: true,
                    message: "请选择县级品牌合伙公司隶属关系",
                    trigger: "blur"
                }
                // memberid: {
                //     required: true,
                //     message: "请选择隶属关系",
                //     trigger: "blur"
                // }
            },
            src:
                "https://pics7.baidu.com/feed/7af40ad162d9f2d3c64187030938d5146127cce2.jpeg?token=cbf0751e5e2ce26497a76f773f4f9aca",
            srcArr: [1, 2, 3, 4, 5, 6],
            member: [],
            listDetails: {
                countybrandid: null,
                countybrandname: null,
                globabrandid: null,
                globabrandname: null,
                nationwidebrandid: null,
                nationwidelbrandname: null,
                provincebrandid: null,
                provincebrandname: null,
                citybrandid: null,
                citybrandname: null,
                globaid: null,
                globaname: null,
                provinceid: null,
                provincename: null,
                cityid: null,
                cityname: null,
                countyid: null,
                countyname: null,
                brandstatus: null,
                createtime: null
            },
            formTel: {
                tel: null
            },
            dialogTel: false,
            totalNumber: 0,
            selectArr: [] // 一杯选择的隶属关系
        };
    },
    methods: {
        /*点击页数*/
        handleCurrentChange(val) {
            this.query.currentPage = val;
            this.getList();
        },

        /*选择每页条数【10,20,30,40,50】*/
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.getList();
        },
        getcountyname() {
            let selectedWorkName = this.countybrandlist.find(item => {
                //这里的chargingWorkNameList就是上面遍历的数据源
                return item.areaid === this.formData.countyid;
                //筛选出匹配数据，是对应数据的整个对象
            });
            this.formData.countyname = selectedWorkName.areaname;
        },

        selChiefpartnerid(val) {
            // 为隶属关系  赋值
            switch (val) {
                case 1:
                    this.member.find(item => {
                        if (item.userId === this.formData.firstchiefpartnerid) {
                            this.selectArr[val - 1] = item.username;
                        }
                        return item.userId === this.formData.firstchiefpartnerid
                            ? (this.formData.firstchiefpartnername =
                                  item.username)
                            : (this.formData.firstchiefpartnername = null);
                    });
                    break;
                case 2:
                    this.member.find(item => {
                        if (
                            item.userId === this.formData.secondchiefpartnerid
                        ) {
                            this.selectArr[val - 1] = item.username;
                        }
                        return item.userId ===
                            this.formData.secondchiefpartnerid
                            ? (this.formData.secondchiefpartnername =
                                  item.username)
                            : (this.formData.secondchiefpartnername = null);
                    });
                    break;
                case 3:
                    this.member.find(item => {
                        if (item.userId === this.formData.threechiefpartnerid) {
                            this.selectArr[val - 1] = item.username;
                        }
                        return item.userId === this.formData.threechiefpartnerid
                            ? (this.formData.threechiefpartnername =
                                  item.username)
                            : (this.formData.threechiefpartnername = null);
                    });
                    break;
                case 4:
                    this.member.find(item => {
                        if (item.userId === this.formData.fourchiefpartnerid) {
                            this.selectArr[val - 1] = item.username;
                        }
                        return item.userId === this.formData.fourchiefpartnerid
                            ? (this.formData.fourchiefpartnername =
                                  item.username)
                            : (this.formData.fourchiefpartnername = null);
                    });
                    break;
                case 5:
                    this.member.find(item => {
                        return item.userId === this.formEditData.chiefpartnerid
                            ? (this.formEditData.chiefpartnername =
                                  item.username)
                            : (this.formEditData.chiefpartnername = null);
                    });
                    break;
            }
            this.provincebrandlist.find(item => {
                //这里的chargingWorkNameList就是上面遍历的数据源
                return item.areaid === this.formData.provinceid;
                //筛选出匹配数据，是对应数据的整个对象
            });
            // this.formData.secondchiefpartnerid = val.userId;
            // this.formData.secondchiefpartnername = val.username;
            console.log(val);
        },

        getArea(type) {
            let query;
            if (type == 1) {
                let selectedWorkName = this.nationwidebrandlist.find(item => {
                    //这里的chargingWorkNameList就是上面遍历的数据源
                    return item.areaid === this.formData.globaid;
                    //筛选出匹配数据，是对应数据的整个对象
                });
                this.formData.globaname = selectedWorkName.areaname;
                query = {};
            } else if (type == 2) {
                let selectedWorkName = this.provincebrandlist.find(item => {
                    //这里的chargingWorkNameList就是上面遍历的数据源
                    return item.areaid === this.formData.provinceid;
                    //筛选出匹配数据，是对应数据的整个对象
                });
                this.formData.provincename = selectedWorkName.areaname;
                this.citybrandlist = [];
                this.countybrandlist = [];
                this.formData.cityid = "";
                this.formData.countyid = "";
                query = { provinceid: this.formData.provinceid };
            } else if (type == 3) {
                let selectedWorkName = this.citybrandlist.find(item => {
                    //这里的chargingWorkNameList就是上面遍历的数据源
                    return item.areaid === this.formData.cityid;
                    //筛选出匹配数据，是对应数据的整个对象
                });
                this.formData.cityname = selectedWorkName.areaname;
                this.countybrandlist = [];
                this.formData.countyid = "";
                query = {
                    provinceid: this.formData.provinceid,
                    cityid: this.formData.cityid
                };
            }
            // getAreaList(query).then(response => {
            //     if (response.status != 1) {
            //         this.$message.error(response.message);
            //         return false;
            //     }
            //     if (type == 1) {
            //         this.provincebrandlist = response.data;
            //     } else if (type == 2) {
            //         this.citybrandlist = response.data;
            //     } else if (type == 3) {
            //         this.countybrandlist = response.data;
            //     }
            // });
        },
        formSubmit() {
            let arr = [...new Set(this.selectArr)]; // 数组去重
            if (arr.length != 4) {
                console.log(arr);
                console.log(this.selectArr);
                this.$message.warning("各级品牌合伙公司不可重复！！！");
                return;
            }
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    console.log(this.formData);
                    batchAddBusBrandPartnershipCompany(this.formData)
                        .then(response => {
                            this.formLoading = false;
                            if (response.code != 0) {
                                this.$message.error(response.message);
                                return false;
                            }
                            this.$message.success("添加成功！");
                            this.hideForm();
                            this.getList();
                        })
                        .catch(() => {
                            this.formLoading = false;
                        });
                }
            });
        },
        // 删除品牌合伙公司
        deleteBrandPartnershipCompany(ids) {
            if (ids) {
                this.$confirm("确认要删除吗?", "提示", {
                    type: "warning"
                })
                    .then(() => {
                        ids = ids + "";
                        console.log(ids);
                        this.loading = true;
                        deleteBrandPartnershipCompany({ ids: ids })
                            .then(response => {
                                this.loading = false;
                                if (response.code != 0) {
                                    this.$message.error(response.message);
                                    return false;
                                }
                                this.$message.success("删除成功！");
                                this.getList();
                            })
                            .catch(() => {
                                this.loading = false;
                            });
                    })
                    .catch(err => {
                        console.log(err);
                    });
            }
        },

        handleForm() {
            this.getAuthAdmin();
            this.formName = "add";
            this.formVisible = true;
        },
        hideForm() {
            // 更改值
            this.formVisible = !this.formVisible;
            // 清空表单
            this.$refs["ruleForm"].resetFields();
        },
        closeDialog() {
            this.showEditPage = false;
        },
        onRest() {
            this.query = {
                name: "",
                status: "",
                currentPage: 1,
                pageSize: 10
            };
            this.getList();
        },
        onSubmit() {
            this.query.currentPage = 1;
            this.getList();
        },
        // 显示查看弹窗
        showSee() {
            this.showEditPage = true;
            getCountyBrandDetail({ countyBrandId: id })
                .then(response => {
                    if (response.code) {
                        this.$message.error(response.message);
                    }
                    console.log(response);
                    this.listDetails = response.data || [];
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.totalNumber = 0;
                });
        },
        // 显示编辑弹窗
        showEdit(id) {
            getBrandPartnershipCompanyDetail({ id: id })
                .then(response => {
                    if (response.code) {
                        this.$message.error(response.message);
                    }
                    console.log(response);
                    this.formEditData = response.data || {};
                    this.formEditData.chiefpartnerid = "";
                    this.getAuthAdmin();
                    this.formEditVisible = true;
                })
                .catch(err => {
                    console.log(err);
                    this.$message.error(err);
                });
        },
        edit() {
            this.$refs["editRules"].validate(valid => {
                if (valid) {
                    console.log(this.formData);
                    addOrEditBusBrandPartnershipCompany(this.formEditData)
                        .then(response => {
                            if (response.code) {
                                this.formEditVisible = false;
                                this.$message.error(response.message);
                            }
                            console.log(response);
                            this.formEditVisible = false;
                            this.loading = true;
                            this.getList();
                        })
                        .catch(err => {
                            console.log(err);
                            this.formEditVisible = false;
                        });
                }
            });
        },
        dateChange() {
            console.log(this.dateVal);
        },
        getList() {
            getBrandPartnershipCompanyPage(this.query)
                .then(response => {
                    if (response.code) {
                        this.$message.error(response.message);
                    }
                    console.log(response);
                    this.list = response.data.list || [];
                    this.totalNumber = response.data.totalNumber || 0;
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.totalNumber = 0;
                });
        },
        getAuthAdmin() {
            getAuthAdmin()
                .then(response => {
                    if (response.code) {
                        this.$message.error(response.message);
                    }
                    console.log(response);
                    this.member = response.data || [];
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                    this.member = [];
                });
        }
    },
    filters: {
        companylevel(val) {
            let value = "县级品牌合伙公司";
            switch (val) {
                case 1:
                    value = "全球品牌合伙公司";
                    break;
                case 2:
                    value = "省级品牌合伙公司";
                    break;
                case 3:
                    value = "市级品牌合伙公司";
                    break;
                case 4:
                    value = "县级品牌合伙公司";
                    break;
            }
            return value;
        }
    },
    created() {
        this.getList();
    }
};
</script>

<style scoped lang="scss">
.showAchievement {
    margin: 30px 0;
    font-size: 16px;
    .achievement {
        padding: 15px 0;
        background-color: rgba(232, 232, 232, 0.3);
        // text-shadow: 5px 5px 5px rgba(255, 140, 0, 1);
        color: rgba(255, 0, 0, 1);
        text-shadow: 1px -1px 1px rgba(255, 0, 0, 1);
        font-weight: 500;
    }
    ul {
        // width: 100%;
        // border-radius: 5px;
        // box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(226, 226, 226, 0.5);
    }
    li {
        text-align: center;
    }
    li + li {
        border-top: 1px solid rgba(226, 226, 226, 0.5);
    }
    .left {
        text-align: center;
        width: 30%;
    }
    .right {
        text-align-last: left;
        width: 70%;
        text-indent: 2em;
    }
    span {
        padding: 15px 0;
        display: inline-block;
        height: 100%;
    }
    span + span {
        border-left: 1px solid rgba(226, 226, 226, 0.5);
    }
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
    width: 400px;
    margin: 0 20px;
}
</style>
